<!--  -->
<template>
  <el-dialog v-model="dialogVisible" :title="ruleForm.id>0 ? '修改居民':'添加居民'" width="700" :before-close="handleClose">
    <el-form 
    ref="ruleFormRef" 
    :model="ruleForm" 
    :rules="rules" 
    class="elform" 
    label-width="auto">

      <el-form-item class="photo" label="头像">

        <el-upload :headers="headers" class="avatar-uploader" :action="uploadUrl" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="ruleForm.photo" :src="imgBaseUrl+ruleForm.photo" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>

      </el-form-item>
      <el-form-item label="楼栋">
        <Buildings @change="buildingChange" :default-value="ruleForm.buildingid" :checkStrictly="false"></Buildings>
      </el-form-item>

      <el-form-item prop="houseid" label="房间">
        <el-select v-model="ruleForm.houseid" placeholder="请选择房间">
          <el-option v-for="item in houses" :label="item.houseno" :value="item.id" />

        </el-select>
      </el-form-item>

      <el-form-item label="姓名" prop="name">
        <el-input v-model="ruleForm.name" />
      </el-form-item>

      <el-form-item label="性别">
        <el-radio-group v-model="ruleForm.sex">
          <el-radio :value="1">男</el-radio>
          <el-radio :value="2">女</el-radio>
        </el-radio-group>

      </el-form-item>

      <el-form-item label="民族">
        <el-input v-model="ruleForm.nation" />
      </el-form-item>

      <el-form-item label="籍贯">
        <el-input v-model="ruleForm.usernative" />
      </el-form-item>

      <el-form-item label="证件">
        <el-input v-model="ruleForm.cardid" />
      </el-form-item>

      <el-form-item label="电话">
        <el-input v-model="ruleForm.mobile" />
      </el-form-item>

      <el-form-item label="类型">
        <el-select v-model="ruleForm.usertype" placeholder="请选择用户类型">
          <el-option v-for="item in userTypes" :label="item.name" :value="item.id" />

        </el-select>

      </el-form-item>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">Cancel</el-button>
        <el-button type="primary" @click="submit">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
  
  <script lang="ts" setup>
  import {onMounted, reactive} from 'vue'
  import { add,getUserTypeList } from '../../service/userinfo/userinfo';
  import { DataInfo } from '../../service/userinfo/type';
  import { getList } from '../../service/house/house';
  import { ref,defineEmits,defineProps} from 'vue'
  import { ElMessage,FormRules,FormInstance  } from 'element-plus'
  import { Plus } from '@element-plus/icons-vue'
  
  import Buildings from '../building/Buildings.vue';

  import { useUserStore } from '../../store';
  let store = useUserStore();
    //上传请求头
  const headers={'Authorization':store.token}
  const uploadUrl=import.meta.env.VITE_BASE_URL+"upload/add";
  const imgBaseUrl=ref(import.meta.env.VITE_IMG_URL);
  const ruleFormRef = ref<FormInstance>()
  //表单数据
  const ruleForm = reactive<DataInfo>({
    id: 0,
          photo:"",
          name:"",
          houseid: null,
          buildingid:null,
          usertype:null,
          sex:0,
          mobile: "",
          usernative:"",
          cardid: "",
          nation:""
  })
  const props=withDefaults(defineProps<DataInfo>(),{
          id: 0,
          photo:"",
          name:"",
          houseid: null,
          usertype:null,
          sex:0,
          mobile: "",
          usernative:"",
          buildingid:null,
          cardid: "",
          nation:""
  })
  
  
  const rules = reactive<FormRules<DataInfo>>({
    name: [
      { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    houseid:[
      { required: true, message: '请选择房间', trigger: 'blur' }
    ]
  
  })
  
  //图片上传
  import type { UploadProps } from 'element-plus'
  
  // const imageUrl = ref('')
  
  const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    // uploadFile
  ) => {
  
    if(response.errCode===10000){
  
      ruleForm.photo=response.data;
    }
  }
  
  const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
    if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png') {
      ElMessage.error('只能上传JPG|PNG格式文件!')
      return false
    } else if (rawFile.size / 1024 / 1024 > 2) {
      ElMessage.error('上传的图片不能超过2MB!')
      return false
    }
    return true
  }
  
  
  
  const dialogVisible = ref(true)
  
   
  
  //获取用户类型
  const userTypes=ref<any[]>([]);
  const getUserTypeData=async ()=>{
  
    const res:any=await getUserTypeList();
    if(res.errCode===10000){
      userTypes.value=res.data.list;
    }
  
  }
  
  //选择楼栋
  const buildingChange=(e:any)=>{
  
    ruleForm.houseid=null;
    if(e){
      getHouses(e);
    }
    else{
      houses.value=[];
    }
    
    
  }
  
  //获取房间列表
  
  const houses=ref<any>([]);
  const getHouses=async (buildingid:number)=>{
    const res:any=await getList({buildingid,psize:1000});
    if(res.errCode===10000){
      houses.value=res.data.list;
    }
  }
  
  const emit=defineEmits(["close"]);
  const handleClose=()=>{
    emit("close");
  }
  //提交
  const postData=async ()=>{
  
    const res:any=await add(ruleForm);
    if(res.errCode===10000){
      emit("close",true);
    }
  
  }
  
  const submit=async ()=>{
    await ruleFormRef.value!.validate((valid) => {
      if (valid) {
        postData();
      } 
    })
  
  }
  onMounted(()=>{
    getUserTypeData();
    Object.assign(ruleForm,props);
    if(ruleForm.buildingid){
      getHouses(ruleForm.buildingid);
    }
  })
  </script>
   
  <style scoped lang="less">
  .elform{
      padding: 30px 50px;
      display: block;
      height:300px;
  }
  .el-form-item{
      width:260px ;
      height: 30px;
      float: right;
      margin-left: 20px;
      margin-bottom: 20px;
  }



  .photo{
      height:80px;
      display: flex;
      align-items: center;
  }
  /deep/ .avatar-uploader .el-upload {
    width: 80px;
    height: 80px;
    border: 1px dashed var(--el-border-color);
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }
  .avatar{
    width: 100%;
    height: 100%;
  }
  
  </style>